<template>
    <div v-if="isshow" class="timestamp">

        <div class="logo">
            <img :src="logourl" class="logoimg">
            <div class="sjz">时间轴</div>
        </div>
        <div class="timestampdata" v-if="timestampList?true : false">
            <div class="year" v-for="item in timestampList.reverse()" :key="item.at(0)">
                <div class="yearfont">{{item.at(0)}}年</div>
                <div class="month" v-for="it in item.at(1).reverse()" :key="it.at(0)">
                    <div class="monthfont">
                        {{it.at(0)}}月
                        <div class="monnum">{{it.at(1).length}}</div>
                    </div>
                    <div style="flex-grow: 1;">
                        <div class="day" v-for="i in it.at(1)" :key="i.at(0)"
                            @click="router.push(`/articleone/${i.at(1).ID}`)">
                            <div class="name">{{i.at(1).article}}</div>
                            <div class="info">
                                <div>创建时间：{{i.at(1).CreatedAt.split('T').at(0)}} |</div>
                                <div>&nbsp更新时间：{{i.at(1).UpdatedAt.split('T').at(0)}} |</div>
                                <div>&nbsp分类：{{i.at(1).categoryname}}</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

---->

<script setup lang="ts">
import logourl from '../../assets/svg/timestamp.svg?url'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../../stores/counter'
const global = getCurrentInstance()
const router = useRouter()
//Flag:数据
let timestampList = ref()
global?.proxy?.$axios.get('/v1/timestamp').then((res: any) => {
    if (res.data.status == 200) {
        //全线转成map
        timestampList.value = Object.entries(res.data.data as object)
        timestampList.value.map((item: any) => {
            item[1] = Object.entries(item[1])
            item[1].map((item: any) => {
                item[1] = Object.entries(item[1])
            })
        })



    }
})

//Flag:组件渲染
let isshow = ref<boolean>(false)
onMounted(() => {
    isshow.value = true
})
//Flag:监听变化
let Store = useCounterStore()
let { Animation } = storeToRefs(Store)
watch(() => { return Animation.value }, () => {
    isshow.value = false
})
</script>

---->

<style scoped lang="scss">
.timestamp {
    padding-top: 3rem;
    margin: 0 auto;
    max-width: 1080px;

    .logo {
        display: flex;
        align-items: center;
        padding-bottom: 2rem;

        .logoimg {
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }

        .sjz {
            font-size: 2.7rem;
            cursor: default;
        }
    }

    .timestampdata {
        cursor: default;
        padding-left: 5rem;

        .year {
            padding-bottom: 1rem;

            .yearfont {
                font-size: 2rem;
                padding-bottom: 1rem;
            }

            .month {
                display: flex;
                padding-top: 1.5rem;

                .monthfont {
                    position: relative;
                    margin-top: 1rem;
                    padding-left: 3.5rem;
                    padding-bottom: 2rem;
                    font-size: 1.5rem;
                    opacity: .85;

                    .monnum {
                        position: absolute;
                        right: -1.3rem;
                        top: -.5rem;
                        font-size: .2rem;
                        font-weight: 500;
                    }
                }

                .day:hover {
                    color: rgb(110, 72, 47);
                    box-shadow: 0 2px 4px rgb(5 10 15 / 5%), 0 7px 13px -3px rgb(5 10 15 / 30%);
                }

                .day {
                    cursor: pointer;
                    border-radius: .3rem;
                    margin-top: 1rem;
                    margin-left: 6rem;
                    min-height: 5rem;
                    // background-color: rgb(240,240,240);
                    box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);

                    .name {
                        padding-top: .2rem;
                        padding-left: 1rem;
                        font-size: 1.2rem;
                        font-weight: 500;
                        height: 1.5rem;
                    }

                    .info {
                        display: flex;
                        align-items: flex-end;
                        font-size: 1rem;
                        height: 3.5rem;
                        padding-left: 1rem;
                        padding-bottom: .4rem;
                    }
                }
            }
        }
    }
}
</style>